Hi 大家好

沒仔細回想的話可能不會發現

但是在前面幾週內，我們已經介紹了

1. JavaScript 模組化概念
2. Node.js
3. CommonJS 標準
4. NPM、相關指令操作、以及 node_modules 介紹
5. 管理 dependency 的技巧: Yarn、package-lock.json、npm shrinkwrap
6. 前端編譯: Webpack
7. 設定你目標瀏覽器/客戶的版本！Browserlist
8. webpack 的各種設定方式
9. JavaScript 標準化的推進，以及 Babel

這是我們在第一個星期創的檔案 package.json

現在看，應該會有不少東西已經很熟悉了

就讓我們這邊來做一個複習，順便把沒介紹到的跑一次吧！

name, version, description, author, private

這幾個欄位在 Vue-Cli 所創建的 package.json + Webpack 設定大解析 已經有了非常詳細的介紹

補充一點，除非要 publist 你的專案到 npm 官方的資料庫去

不然版本應該是不太需要調整的

scripts

這我們之前有做介紹

在 scripts 裡寫的內容，我們通常會叫他 npm scripts

基本上我們會把專案執行、編譯、測試該使用的指令，都寫在這個欄位

這邊 vue-cli 有幫我們產生 dev start lint build

dev

之前其實 webpack 有個功能沒有介紹到

那就是 webpack-dev-server

他基本上是 webpack 開發團隊的另一個專案

如果有用過 livereload 應該會很熟悉

那就是會幫你在檔案更新時，自動編譯

並自動幫你刷新(他基本上就是一個 webpack + socket livereload)

他刷新的方式也很特別，是他們自己設計的 hot-module-replacement

他會只把有跟改動相關的模組更新，而不重整整個頁面

這邊 npm run dev 將會去執行

webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

其中 webpack-dev-server 跟 webpack 幾乎一樣，只是加上了 hot-module-replacement 的功能

webpack-dev-server 其實有兩種刷新模式可以選，有 inline 和 iframe

這兩個的差別我沒有很了解，想知道詳細可能得去看原始碼(文件上沒寫)

https://webpack.js.org/configuration/dev-server/

--progress

這個開啟的話，編譯時會顯示進度

--config build/webpack.dev.conf.js

這個跟 webpack 一樣，我們這裡指定要使用 build/webpack.dev.conf.js 這個設定檔

start

這條還滿神秘的

因為你可以看到，npm run start 只是把 npm run dev 再跑一次而已

其實有點多此一舉，不過我猜想加這條有幾個原因

1. 有些工具(像是 heroku)，他們的服務會自動幫你執行 npm run start 這個指令
2. 可能有人進專案，什麼都不看就先 npm run start 跑跑看(?)

我後來有追到這條改動

vue-cli 其實使用的模板不是放在 vue-cli 這個專案底下

而是在 vuejs-templates 這個專案裡

我有發一個 comment 問這條的改動原因(希望沒有不禮貌)

https://github.com/vuejs-templates/webpack/commit/6f7c03d85021c426aaa7465406a43bcf503a13d9

lint

關於 eslint 這篇 介紹的很棒

基本上他是一個語法檢查

不過有趣的地方是，其實 eslint-loader 這樣的工具就可以把他跟 webpack 包在一起用了

https://github.com/MoOx/eslint-loader

不知道為何要獨立成一個指令

build

執行 build/build.js 這隻檔案來進行編譯

明天

這邊還有下面使用的各個 dependency，以及

build/webpack.dev.conf.js, build.js 這兩隻檔案到底做了哪些事情

我會挑其中一個題目來講，大家明天見！